Tables
Simple Table
| Name | Position | Office | Age |
|---|---|---|---|
| Airi Satou | Tokyo | 33 | |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Bradley Greer | Software Engineer | London | 41 |
| Brenden Wagner | Software Engineer | San Francisco | 28 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Bruno Nash | Software Engineer | London | 38 |
HTML
<div class="overflow-table">
<table class="adjust-for-mobile">
<thead>
<tr role="row">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td data-label="Name">Airi Satou</td>
<td data-label="Position">Accountant</td>
<td data-label="Office">Tokyo</td>
<td data-label="Age">33</td>
</tr>
</tbody>
</table>
</div>
Problem Being Solved
Content needs to be displayed in a table format.
When to Use
When Not to Use
This pattern should not be used for complex or data-heavy tables, or if the goal of the table is to compare information across categories.
Example: Comparison Table
| Curriculum Criteria | Level I | Level II |
|---|---|---|
| Ethical and Professional Standards | 15 | 10-15 |
| Quantitative Methods | 15 | 10-15 |
| Economics | 15 | 10-15 |
| Financial Reporting and Analysis | 15 | 10-15 |
| Financial Reporting and Analysis | 15 | 10-15 |
HTML
<div class="full-width comparison-table">
<table>
<thead>
<tr>
<th scope="col">Curriculum Criteria</th>
<th scope="col">Level I</th>
<th scope="col">Level II</th>
<th scope="col">Level III</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ethical and Professional Standards</th>
<td>15</td>
<td>10-15</td>
<td>10-15</td>
</tr>
<tr>
<th scope="row">Quantitative Methods</th>
<td>15</td>
<td>10-15</td>
<td>10-15</td>
</tr>
<tr>
<th scope="row">Economics</th>
<td>15</td>
<td>10-15</td>
<td>10-15</td>
</tr>
<tr>
<th scope="row">Financial Reporting and Analysis</th>
<td>15</td>
<td>10-15</td>
<td>10-15</td>
</tr>
</tbody>
</table>
</div>
Problem Being Solved
High-impact content needs to be displayed in a way that allows users to compare across categories.
When to Use
It can be used to support comparison of up to three columns of content.
When Not to Use
It should not be used for complex or data-heavy tabular content.
Formatting
Comparison tables require JS to display extra design elements.
Example: Dynamic Comparison Table
| Select Job Roles: | ||||
|---|---|---|---|---|
| Average total annual compensation ($USD) | - | - | - | - |
| Key technical competencies identified in the CFA Institute Competency Framework | - | - | - | - |
| Likelihood role will change substantially in the next 5-10 years | - | - | - | - |
| Proportion of time spent doing new work vs. familiar work | - | - | - | - |
| Level of technical specialization required | - | - | - | - |
HTML
<div class="full-width dynamic-comparison-table">
<table>
<thead>
<tr>
<th class="title" scope="col">Select Job Roles:</th>
<th scope="col">
<select id="dynamic-select-1" class="form-control">
<option>Select Option</option>
</select>
</th>
<th scope="col">
<select id="dynamic-select-2" class="form-control" disabled>
<option>Select Option</option>
</select>
</th>
<th scope="col">
<select id="dynamic-select-3" class="form-control" disabled>
<option>Select Option</option>
</select>
</th>
<th scope="col">
<select id="dynamic-select-4" class="form-control" disabled>
<option>Select Option</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr class="new-category">
<th scope="row">Average total annual compensation ($USD)</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr class="new-category">
<th scope="row">Key technical competencies identified in the CFA Institute Competency Framework</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr class="new-category">
<th scope="row">Likelihood role will change substantially in the next 5-10 years</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th scope="row">Proportion of time spent doing new work vs. familiar work</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr class="new-category">
<th scope="row">Level of technical specialization required</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
Problem Being Solved
With many options available, we'd like to allow the user to choose what they're interested in comparing.
When to Use
It can be used when many options are available to help save space.
When Not to Use
It should not be used for complex or data-heavy tabular content. There should only ever be one dynamic comparison table per page.
Formatting
The dynamic comparison table requires additional JS to swap data points. It also requires a JSON variable prepopulated by the backend containing pertinent data.
Table should have the data attribute "data-career-engagement-tool-job-data." It should contain table data.
Display — mandatory field in table data.
Table should have the class "dynamic-comparison-table."
It is possible to have several tables on the same page.
Each <tr> that represents table data should have the data attribute "data-json-field-name-token."